<template>
	<!-- 角色列表页面 -->
	<echelon-solutions>
		<!-- 这里是顶部导航栏 -->
		<skyline-navigation title="账号管理"> </skyline-navigation>
		<!-- 这里是中间区域 -->
		<central-hub>
			<MyPopup v-model="popupVisible">
				<MyForm :fields="formFields" @submit="submitForm" submit-text="提交"></MyForm>
			</MyPopup>
			<view >
				<view class="flexGap">
					<button type="primary" @click="handleAdd()">新增</button>
					<button @click="handleFixed()" :type="columnsData[columnsData.length - 1].fixed?'primary':''" >固定操作</button>
				</view>
				<my-table :columns="columnsData" :dataSource="tableData" style="flex: 1;" selectable
					v-model="selectedRows">
					<template #operate="{ data }">
						<view class="flexGapB">
							<button type="primary" @click="handleEdit(data)">编辑</button>
							<button type="warn" @click="handleDelete(data)">删除</button>
						</view>
					</template>
				</my-table>
			</view>
		</central-hub>
	</echelon-solutions>
</template>

<script>
	import MyTable from '@/components/MyTable.vue';
	import MyPopup from '@/components/MyPopup.vue'
	import MyForm from '@/components/MyForm.vue'
	import {
		getAaccountUserRoleList
	} from '@/services/base/bill/combineds.js';
	export default {
		components: {
			MyTable,
			MyPopup,
			MyForm
		},
		methods: {
			// 提交
			submitForm(formData) {
				console.log(formData);
				const result = "提交成功";
				uni.showToast({
					title: result,
					icon: 'success'
				});
			},
			// 新增
			handleAdd() {
				this.popupVisible = !this.popupVisible;
			},
			// 修改
			handleEdit(data) {

			},
			// 删除
			handleDelete(data) {

			},
			handleFixed() {
				const lastColumn = this.columnsData[this.columnsData.length - 1];
				lastColumn.fixed = lastColumn.fixed ? '' : 'right';
			}
		},
		onLoad() {
			(async () => {
				this.tableData = await getAaccountUserRoleList();
			})()
		},
		data() {
			return {
				selectedRows: [],
				popupVisible: false,
				formFields: [{
						"label": "账号",
						"type": "text",
						"name": "username",
						"value": "",
						required: true,
					},
					{
						"label": "用户名",
						"type": "text",
						"name": "real_name",
						"value": "",
						required: true,
					},
					{
						"label": "邮箱",
						"type": "text",
						"name": "email",
						"value": "",
						required: true,
					},
					{
						"label": "角色名",
						"type": "text",
						"name": "name",
						"value": "",
						required: true,
					},
					{
						"label": "角色描述",
						"type": "text",
						"name": "description",
						"value": "",
						required: true,
					}
				],
				columnsData: [{
						title: 'ID',
						key: 'id',
						fixed: 'left',
					},
					{
						title: '账号',
						key: 'username'
					},
					{
						title: '用户名',
						key: 'real_name'
					},
					{
						title: '邮箱',
						key: 'email'
					},
					{
						title: '角色名',
						key: 'name'
					},
					{
						title: '角色描述',
						key: 'description'
					},
					{
						title: '操作',
						key: 'operate',
						fixed: '',
					}
				],
				tableData: []
			}
		}
	}
</script>
<style scoped>
	.central-hub-h {
		height: calc(var(--central-hub-h) - var(--my-tab-safe-area));
	}

	.flexGap {
		padding: 6px;
		box-sizing: border-box;
	}
</style>